<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js">
        /* 处理复杂的业务逻辑，经常使用方法、计算属性、监听器
    methods：方法
            它们是挂载在vue对象上的函数，通常用于做事件处理函数，或者封装自定义函数
    computed：计算属性
            可以计算某个属性的值，还可以调用data中的数据进行操作
    watch：监听器
            如果在数据发生改变时，还要求作出相应的改变，就可以使用监听器
    注意事项：
            计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新 */
    </script>
</head>
<body>
            <!-- 一个案例,根据商品数量修改总价 -->
    <div id="app">
        <div v-for="(item, index) in items" :key="index">
            <p>{{ item.name }}  price:{{ item.price }}</p>
            <input type="number" v-model="item.quantity">
          </div>
          <div>Total: {{ totalPrice }}</div>
    </div>
    <script>
        //创建vue实例
        Vue.createApp({
           data(){
            return{
                items: [
                { name: 'item1', price: 10, quantity: 0 },
                { name: 'item2', price: 20, quantity: 0 },
                { name: 'item3', price: 30, quantity: 0 },
            ]
            }
           },
           computed:{
            totalPrice() {
                return this.items.reduce((total, item) => {
                    return total + (item.price * item.quantity)
                }, 0)
            }
           }
        }).mount("#app")
    </script>
</body>
</html>

